<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>MapV通勤图</title>
    <link rel="stylesheet" href="http://cdn.bootcss.com/leaflet/1.0.3/leaflet.css">
</head>
<body style=" margin: 0;overflow: hidden;background: #fff;width: 100%;height:100%;position: absolute;top: 0;">
<div id="map" style="margin:0 auto;width: 100%;height: 100%"></div>
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" src="http://cdn.bootcss.com/leaflet/1.0.3/leaflet.js"></script>
<script type="text/javascript" src="http://mapv.baidu.com/build/mapv.min.js"></script>
<script type="text/javascript" src="../../dist/iclient9-leaflet.min.js"></script>
<script type="text/javascript">

    var map = L.map('map', {
        center: [29.56, 106.56],
        zoom: 11,
    });
    var mbAttr = 'Imagery © <a href="http://mapbox.com">Mapbox</a>',
        token = "pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw",
        mbUrl = 'https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=' + token;

    L.tileLayer(mbUrl, {id: 'mapbox.dark', attribution: mbAttr}).addTo(map);
    loadData();

    //示例数据来源为百度MapV的加偏数据，iClient9未做纠偏处理
    function loadData() {
        $.get('../data/car.csv', function (csvstr) {
            var dataSet = mapv.csv.getDataSet(csvstr);
            var options = {
                strokeStyle: 'rgba(50, 50, 255, 0.8)',
                lineWidth: 0.05,
                globalCompositeOperation: 'lighter',
                draw: 'simple'
            };
            var dataAttr = "数据来源<a target='_blank' href='http://mapv.baidu.com/examples/csv-car.html'> MapV</a>,";
            L.supermap.mapVLayer(dataSet, options, {attributionPrefix: dataAttr}).addTo(map);
            setTimeout(function () {
                map.openPopup("示例数据来源为百度MapV的加偏数据，iClient9未做纠偏处理", map.getCenter());
            }, 1000)
        });
    }

</script>

</body>
</html>
